import {useState,useEffect} from 'react'
// useEffect:实现类组件内生命周期的功能

const Effect = () => {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);
  // componentDidMount
  useEffect(()=>{
    console.log('mount');
    return ()=>{
      console.log('willUnmount')
    }
  },[])
  // componentDidUpdate
  useEffect(()=>{
    count!=0 && console.log('update');
  },[count]);

  console.log('render')
  
  const add = () => setCount(count + 1);
  const updateCount = () => setCount2(count2 + 1);

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={add}>点击 +1</button>
      <h2>count2: {count2}</h2>
      <button onClick={updateCount}>更新count2</button>
    </div>
  )
}

export default Effect